<template>
	<div :style="fontSize ? `font-size:${fontSize}px` : ''">
		<v-md-editor
			v-model="curVal"
			class="app-mavon-editor"
			:mode="editmode"
			:left-toolbar="isShowLeftToolbar"
			:right-toolbar="isShowRightToolbar"
			:default-show-toc="showCatalog"
			:placeholder="placeholder"
			@save="onSave"
		/>
	</div>
</template>
<script setup lang="ts">
import { markDownProps } from './markdown';
import { IEvent } from '@/core';
interface EditorEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
const props = defineProps(markDownProps);
const emit = defineEmits<EditorEmit>();
const editmode = ref('');
onBeforeMount(() => {
	if (props.mode == 'subfield') {
		editmode.value = 'editable';
	} else if (props.mode == 'preview' || props.disabled) {
		editmode.value = 'preview';
	} else {
		editmode.value = props.mode;
	}
});
const curVal = computed({
	get() {
		return props.value;
	},
	set(value: string) {
		emitFun(value);
	},
});
const emitFun = (data: any) => {
	emit('component-action', {
		name: `${props.name}`,
		action: 'vlaueChange',
		data: data,
	});
};
const onSave = (text: string, html: any) => {
	emitFun(text);
};
const isShowLeftToolbar = computed(() => {
	if (props.showToolbar) {
		return 'undo redo clear | h bold italic strikethrough quote | ul ol table hr | link code | save';
	} else {
		return '';
	}
});
const isShowRightToolbar = computed(() => {
	if (props.showToolbar) {
		return 'preview toc sync-scroll fullscreen';
	} else {
		return '';
	}
});
</script>
